<template>
  <div id="rich-text" style="margin-top: 10px">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @focus="onEditorFocus($event)"
      @blur="onEditorBlur($event)"
      @change="onEditorChange($event)"
      class="editor"
    ></quill-editor>
    <div class="block">
      <el-tree
        :data="datas"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
        style="width: 500px;border:1px solid #d6d6d6;padding: 20px;margin-left: 10px">
      </el-tree>
      <div style="margin-top: 20px;margin-left: 80px">
        <el-button type="success" @click="savetree()">保存</el-button>
        <el-button type="info" @click="returnUrl()">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import {quillEditor} from "vue-quill-editor";
import axios from "axios";

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{header: 1}, {header: 2}], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{script: "sub"}, {script: "super"}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{indent: "-1"}, {indent: "+1"}], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{direction: "rtl"}], // 文本方向-----[{'direction': 'rtl'}]
  [{size: ["small", false, "large", "huge"]}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{color: []}, {background: []}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{font: []}], // 字体种类-----[{ font: [] }]
  [{align: []}], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];

let id = 1000;
export default {
  components: {
    quillEditor
  },
  data() {
    const datas = [];
    return {
      content: ``, // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          //工具栏定义的
          toolbar: toolbarOptions
        },
        //主题
        theme: "snow",
        placeholder: "请输入正文",
      },
      datas: JSON.parse(JSON.stringify(datas)),
      datasId: '',
      contentArray: []
    }
  },
  methods: {
    //失去焦点事件
    onEditorBlur(quill) {
      let contentObject = {
        sectionId: this.datasId,
        sectionContent: this.content
      }
      let flag = 0
      for (var i = 0; i < this.contentArray.length; i++) {
        if (this.contentArray[i].sectionId == contentObject.sectionId) {
          flag = 1
          break
        }
      }
      if (flag == 1) {
        this.contentArray[i].sectionContent = contentObject.sectionContent
      } else {
        this.contentArray.push(contentObject)
      }
      console.log(JSON.stringify(this.contentArray))
    },

    //获得焦点事件
    onEditorFocus(quill) {
    },

    // 准备富文本编辑器
    onEditorReady(quill) {
    },

    //内容改变事件
    onEditorChange({quill, html, text}) {
      this.content = html
    },
    append(data) {
      let value = prompt("标题名", "默认标题")
      if (value != null) {
        const newChild = {id: id++, label: value, children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      }
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    revise(node, data) {
      let value = prompt("标题名")
      if (value == "") {
        this.remove(node, data)
      } else {
        data.label = value
      }
    },
    updateContent(node, data) {
      this.content = data.sectionContent
      this.datasId = data.sectionId
    },
    renderContent(h, {node, data, store}) {
      return (
        <span class="custom-tree-node">
          <el-button type="text" style="color:#636363"
                     on-click={() => this.updateContent(node, data)}>{node.label}</el-button>
            <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}
                         style="margin-left:100px">添加</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}
                         style="float:right;margin-top:6px">删除</el-button>
              <el-button size="mini" type="text" on-click={() => this.revise(node, data)}
                         style="float:right;margin-top:6px">修改</el-button>
            </span>
          </span>);
    },
    returnUrl() {
      window.close();
    },
    savetree() {
      this.onEditorBlur()
      var test = JSON.stringify(this.datas)
      var test2 = JSON.stringify(this.contentArray)
      axios({
        url: '/section/update',
        data: test,
        params: {
          courseId: localStorage.getItem('courseIndex')
        },
        method: 'Post',
        headers: {
          "Content-type": "application/json;charset=utf-8"
        }
      }).then(res => {
        axios({
          url: '/section/updatecontent',
          data: test2,
          method: 'Post',
          headers: {
            "Content-type": "application/json;charset=utf-8"
          }
        });
        this.$router.push('/Teaching/TSectionIndex')
      }).catch(function (error) {
        console.log(error);
      });
    }
  },
  mounted() {
    axios('/section/show', {
      params: {
        courseId: localStorage.getItem('courseIndex')
      },
      method: 'Get'
    }).then(res => {
      console.log(res.data)
      this.datas = res.data.data
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>

.editor {
  line-height: normal !important;
  height: 650px;
  width: 900px;
  float: right;
  margin-right: 10px;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
